<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <link href="../cornerstone.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            Freehand Sculpting
        </h1>
        <p>
            This page demonstrates how to sculpt a freehand ROI using freehandSculpter
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <br>

    <div class="row">
        <div class="col-xs-2">
            <ul class="list-group">
                <a id="disable" class="list-group-item">Disable</a>
                <a id="activate" class="list-group-item">Activate</a>
            </ul>
            <br/>
            <ul class="col-xs-12 col-sm-2">
                <div id="keyPressed">Holding:</div>
            </ul>
            <br/>
        </div>
        <div class="col-xs-10">
            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
                 oncontextmenu="return false"
                 class='cornerstone-enabled-image'
                 unselectable='on'
                 onselectstart='return false;'
                 onmousedown='return false;'>
                <div id="dicomImage"
                     style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <h3>Functionality</h3>
            <h4>Select ROI</h4>
            <ul>
                <li>Ctrl-click near a region of interest to select it for editing.</li>
                <li>The region will become highlighted to show that it has been selected.</li>
            </ul>
            <h4>Edit ROI</h4>
            <ul>
                <li>Hold down left click near the selected tool to begin editing.</li>
                <ul>
                    <li>The closer to the contour the mouse is, the smaller the tool will be.</li>
                    <li>The tool can push from either the inside or the outside.</li>
                </ul>
                <li>With the mouse held down, drag the tool to push the ROI.</li>
                <ul>
                    <li>New points will be created and deleted as needed.</li>
                </ul>
                <li>Release the mouse to complete the edit.</li>
                <li>You may find you wish to make rough edits with a large tool, before making fine adjustments with a finer tool.</li>
            </ul>
        </div>
    </div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>

<script src="../cornerstoneMath.min.js"></script>


<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    var element = document.getElementById('dicomImage');
    var imageId = 'example://1';

    const keyCodes = {
        SHIFT: 16,
        CTRL: 17,
        ALT: 18
    };

    const config = {
      ctrl: false,
      shift: false,
      alt: false
    };

    function onKeyDown(e) {
      const data = e.detail;
      const keyCode = data.keyCode;

      if (keyCode === keyCodes.CTRL) {
        config.ctrl = true;
      } else if (keyCode === keyCodes.SHIFT) {
        config.shift = true;
      } else if (keyCode === keyCodes.ALT) {
        config.alt = true;
      }

      let keyName = '';

      if (config.ctrl) {
        keyName += ' Ctrl';
      }
      if (config.shift) {
        keyName += ' Shift';
      }
      if (config.alt) {
        keyName += ' Alt';
      }

      document.getElementById('keyPressed').textContent = "Holding:" + keyName;
    }

    function onKeyUp(e) {
      const data = e.detail;
      const keyCode = data.keyCode;

      if (keyCode === keyCodes.CTRL) {
        config.ctrl = false;
      } else if (keyCode === keyCodes.SHIFT) {
        config.shift = false;
      } else if (keyCode === keyCodes.ALT) {
        config.alt = false;
      }

      let keyName = '';

      if (config.ctrl) {
        keyName += ' Ctrl';
      }
      if (config.shift) {
        keyName += ' Shift';
      }
      if (config.alt) {
        keyName += ' Alt';
      }

      document.getElementById('keyPressed').textContent = "Holding:" + keyName;
    }

    element.tabIndex = 0;
    element.focus();

    element.addEventListener("cornerstonetoolskeydown", onKeyDown);
    element.addEventListener("cornerstonetoolskeyup", onKeyUp);

    cornerstoneTools.toolStyle.setToolWidth(3);
    cornerstoneTools.toolColors.setToolColor("#ffcc33");
    cornerstoneTools.toolColors.setActiveColor("#0099ff");
    cornerstoneTools.toolColors.setFillColor("#0099ff");

    // image enable the dicomImage element
    cornerstone.enable(element);
    cornerstoneTools.keyboardInput.enable(element);
    cornerstoneTools.mouseInput.enable(element);
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);

        // Enable all tools we want to use with this element
        cornerstoneTools.freehand.enable(element);
        // Load 2 example tools from JSON.
        cornerstoneTools.addToolState(element, 'freehand', getExampleRoi1());
        cornerstoneTools.addToolState(element, 'freehand', getExampleRoi2());

        activate("activate");
        cornerstoneTools.freehandSculpter.activate(element, 1);
        element.focus();

        function activate(id)
        {
            document.querySelectorAll('a').forEach(function(elem) { elem.classList.remove('active'); });
            document.getElementById(id).classList.add('active');
        }

        // Tool button event handlers that set the new active tool
        document.getElementById('disable').addEventListener('click', function() {
            activate("disable");
            cornerstoneTools.freehandSculpter.disable(element);
            element.focus();
            return false;
        });
        document.getElementById('activate').addEventListener('click', function() {
            activate("activate");
            cornerstoneTools.freehandSculpter.activate(element, 1);
            element.focus();
            return false;
        });
    });

    function getExampleRoi1() {
      const exampleRoiJSON =
      '{"visible":true,"active":false,"invalidated":true,"handles":[{"x":158.25,"y":92.19999694824219,"highlight":true,"active":false,"lines":[{"x":153.25,"y":91.19999694824219}]},'
      + '{"x":153.25,"y":91.19999694824219,"highlight":true,"active":false,"lines":[{"x":147,"y":92.19999694824219}]},'
      + '{"x":147,"y":92.19999694824219,"highlight":true,"active":false,"lines":[{"x":141.5,"y":94.69999694824219}]},'
      + '{"x":141.5,"y":94.69999694824219,"highlight":true,"active":false,"lines":[{"x":135.5,"y":99.69999694824219,"highlight":true,"active":false,"lines":[{"x":133.75,"y":104.19999694824219}]}]},'
      + '{"x":135.5,"y":99.69999694824219,"highlight":true,"active":false,"lines":[{"x":133.75,"y":104.19999694824219}]},'
      + '{"x":133.75,"y":104.19999694824219,"highlight":true,"active":false,"lines":[{"x":131.75,"y":109.19999694824219}]},'
      + '{"x":131.75,"y":109.19999694824219,"highlight":true,"active":true,"lines":[{"x":130.75,"y":114.19999694824219}]},'
      + '{"x":130.75,"y":114.19999694824219,"highlight":true,"active":false,"lines":[{"x":130.75,"y":119.19999694824219}]},'
      + '{"x":130.75,"y":119.19999694824219,"highlight":true,"active":false,"lines":[{"x":131.25,"y":124.19999694824219}]},'
      + '{"x":131.25,"y":124.19999694824219,"highlight":true,"active":false,"lines":[{"x":133.75,"y":128.6999969482422}]},'
      + '{"x":133.75,"y":128.6999969482422,"highlight":true,"active":false,"lines":[{"x":136.25,"y":133.1999969482422}]},'
      + '{"x":136.25,"y":133.1999969482422,"highlight":true,"active":false,"lines":[{"x":138.75,"y":137.6999969482422}]},'
      + '{"x":138.75,"y":137.6999969482422,"highlight":true,"active":false,"lines":[{"x":142.75,"y":141.6999969482422}]},'
      + '{"x":142.75,"y":141.6999969482422,"highlight":true,"active":false,"lines":[{"x":146.75,"y":145.1999969482422}]},'
      + '{"x":146.75,"y":145.1999969482422,"highlight":true,"active":false,"lines":[{"x":151.5,"y":147.1999969482422}]},'
      + '{"x":151.5,"y":147.1999969482422,"highlight":true,"active":false,"lines":[{"x":157,"y":146.6999969482422}]},'
      + '{"x":157,"y":146.6999969482422,"highlight":true,"active":false,"lines":[{"x":160.75,"y":145.6999969482422}]},'
      + '{"x":160.75,"y":145.6999969482422,"highlight":true,"active":false,"lines":[{"x":164.25,"y":141.6999969482422}]},'
      + '{"x":164.25,"y":141.6999969482422,"highlight":true,"active":false,"lines":[{"x":167.25,"y":137.6999969482422}]},'
      + '{"x":167.25,"y":137.6999969482422,"highlight":true,"active":false,"lines":[{"x":169.75,"y":132.6999969482422}]},'
      + '{"x":169.75,"y":132.6999969482422,"highlight":true,"active":false,"lines":[{"x":172.25,"y":128.1999969482422}]},'
      + '{"x":172.25,"y":128.1999969482422,"highlight":true,"active":false,"lines":[{"x":174.75,"y":123.69999694824219}]},'
      + '{"x":174.75,"y":123.69999694824219,"highlight":true,"active":false,"lines":[{"x":176.25,"y":118.69999694824219}]},'
      + '{"x":176.25,"y":118.69999694824219,"highlight":true,"active":false,"lines":[{"x":176.25,"y":113.69999694824219}]},'
      + '{"x":176.25,"y":113.69999694824219,"highlight":true,"active":false,"lines":[{"x":174.25,"y":108.69999694824219}]},'
      + '{"x":174.25,"y":108.69999694824219,"highlight":true,"active":false,"lines":[{"x":172.25,"y":103.69999694824219}]},'
      + '{"x":172.25,"y":103.69999694824219,"highlight":true,"active":false,"lines":[{"x":169.75,"y":99.19999694824219}]},'
      + '{"x":169.75,"y":99.19999694824219,"highlight":true,"active":false,"lines":[{"x":168,"y":95.69999694824219}]},'
      + '{"x":168,"y":95.69999694824219,"highlight":true,"active":false,"lines":[{"x":163.5,"y":92.69999694824219}]},'
      + '{"x":163.5,"y":92.69999694824219,"highlight":true,"active":false,"lines":[{"x":158.25,"y":92.19999694824219,"highlight":true,"active":false,"lines":[{"x":153.25,"y":91.19999694824219}]}]}],'
      + '"textBox":{"active":false,"hasMoved":false,"movesIndependently":false,"drawnIndependently":true,"allowedOutsideImage":true,"hasBoundingBox":true,"x":176.25,"y":124.7249984741211,'
      + '"boundingBox":{"width":142.5,"height":65,"left":352.5,"top":216.9499969482422}},"canComplete":false,"highlight":false,'
      + '"polyBoundingBox":{"left":130.75,"top":91.19999694824219,"width":45.5,"height":67.05000305175781},'
      + '"meanStdDev":{"count":1856,"mean":148.21713362068965,"variance":568.0859348873164,"stdDev":23.834553381326792},"area":1540.7742500305176}';

      return JSON.parse(exampleRoiJSON);
    }


    function getExampleRoi2() {
      const exampleRoiJSON =
      '{"visible":true,"active":false,"invalidated":true,"handles":[{"x":96.5,"y":191.06666564941406,"highlight":true,"active":true,"lines":[{"x":91.5,"y":191.06666564941406}]},\
      {"x":91.5,"y":191.06666564941406,"highlight":true,"active":true,"lines":[{"x":87.5,"y":187.56666564941406}]},\
      {"x":87.5,"y":187.56666564941406,"highlight":true,"active":true,"lines":[{"x":87.5,"y":182.56666564941406}]},\
      {"x":87.5,"y":182.56666564941406,"highlight":true,"active":true,"lines":[{"x":88,"y":177.56666564941406}]},\
      {"x":88,"y":177.56666564941406,"highlight":true,"active":true,"lines":[{"x":92,"y":174.06666564941406}]},\
      {"x":92,"y":174.06666564941406,"highlight":true,"active":true,"lines":[{"x":94,"y":169.06666564941406}]},\
      {"x":94,"y":169.06666564941406,"highlight":true,"active":true,"lines":[{"x":94.5,"y":164.06666564941406}]},\
      {"x":94.5,"y":164.06666564941406,"highlight":true,"active":true,"lines":[{"x":92,"y":159.06666564941406}]},\
      {"x":92,"y":159.06666564941406,"highlight":true,"active":true,"lines":[{"x":88,"y":156.06666564941406}]},\
      {"x":88,"y":156.06666564941406,"highlight":true,"active":true,"lines":[{"x":82.5,"y":155.06666564941406}]},\
      {"x":82.5,"y":155.06666564941406,"highlight":true,"active":true,"lines":[{"x":77.5,"y":155.06666564941406}]},\
      {"x":77.5,"y":155.06666564941406,"highlight":true,"active":true,"lines":[{"x":72.5,"y":158.06666564941406}]},\
      {"x":72.5,"y":158.06666564941406,"highlight":true,"active":true,"lines":[{"x":68.5,"y":161.56666564941406}]},\
      {"x":68.5,"y":161.56666564941406,"highlight":true,"active":true,"lines":[{"x":68.5,"y":166.56666564941406}]},\
      {"x":68.5,"y":166.56666564941406,"highlight":true,"active":true,"lines":[{"x":71.5,"y":170.56666564941406}]},\
      {"x":71.5,"y":170.56666564941406,"highlight":true,"active":true,"lines":[{"x":73,"y":175.56666564941406}]},\
      {"x":73,"y":175.56666564941406,"highlight":true,"active":true,"lines":[{"x":70.5,"y":180.06666564941406}]},\
      {"x":70.5,"y":180.06666564941406,"highlight":true,"active":true,"lines":[{"x":65.5,"y":182.06666564941406}]},\
      {"x":65.5,"y":182.06666564941406,"highlight":true,"active":true,"lines":[{"x":60.5,"y":182.56666564941406}]},\
      {"x":60.5,"y":182.56666564941406,"highlight":true,"active":true,"lines":[{"x":57,"y":178.06666564941406}]},\
      {"x":57,"y":178.06666564941406,"highlight":true,"active":true,"lines":[{"x":54,"y":174.06666564941406}]},\
      {"x":54,"y":174.06666564941406,"highlight":true,"active":true,"lines":[{"x":50,"y":170.56666564941406}]},\
      {"x":50,"y":170.56666564941406,"highlight":true,"active":true,"lines":[{"x":45,"y":170.56666564941406}]},\
      {"x":45,"y":170.56666564941406,"highlight":true,"active":true,"lines":[{"x":40,"y":171.06666564941406}]},\
      {"x":40,"y":171.06666564941406,"highlight":true,"active":true,"lines":[{"x":36,"y":174.56666564941406}]},\
      {"x":36,"y":174.56666564941406,"highlight":true,"active":true,"lines":[{"x":32.5,"y":179.56666564941406}]},\
      {"x":32.5,"y":179.56666564941406,"highlight":true,"active":true,"lines":[{"x":30,"y":184.06666564941406}]},\
      {"x":30,"y":184.06666564941406,"highlight":true,"active":true,"lines":[{"x":30,"y":189.56666564941406}]},\
      {"x":30,"y":189.56666564941406,"highlight":true,"active":true,"lines":[{"x":31.5,"y":194.56666564941406}]},\
      {"x":31.5,"y":194.56666564941406,"highlight":true,"active":true,"lines":[{"x":35.5,"y":197.56666564941406}]},\
      {"x":35.5,"y":197.56666564941406,"highlight":true,"active":true,"lines":[{"x":40.5,"y":197.06666564941406}]},\
      {"x":40.5,"y":197.06666564941406,"highlight":true,"active":true,"lines":[{"x":44,"y":193.06666564941406}]},\
      {"x":44,"y":193.06666564941406,"highlight":true,"active":true,"lines":[{"x":49,"y":191.56666564941406}]},\
      {"x":49,"y":191.56666564941406,"highlight":true,"active":true,"lines":[{"x":53,"y":194.56666564941406}]},\
      {"x":53,"y":194.56666564941406,"highlight":true,"active":true,"lines":[{"x":54.5,"y":199.56666564941406}]},\
      {"x":54.5,"y":199.56666564941406,"highlight":true,"active":true,"lines":[{"x":52.5,"y":204.56666564941406}]},\
      {"x":52.5,"y":204.56666564941406,"highlight":true,"active":true,"lines":[{"x":48.5,"y":207.56666564941406}]},\
      {"x":48.5,"y":207.56666564941406,"highlight":true,"active":true,"lines":[{"x":45,"y":211.56666564941406}]},\
      {"x":45,"y":211.56666564941406,"highlight":true,"active":true,"lines":[{"x":44,"y":216.56666564941406}]},\
      {"x":44,"y":216.56666564941406,"highlight":true,"active":true,"lines":[{"x":45,"y":221.56666564941406}]},\
      {"x":45,"y":221.56666564941406,"highlight":true,"active":true,"lines":[{"x":49,"y":225.56666564941406}]},\
      {"x":49,"y":225.56666564941406,"highlight":true,"active":true,"lines":[{"x":54,"y":227.06666564941406}]},\
      {"x":54,"y":227.06666564941406,"highlight":true,"active":true,"lines":[{"x":59.5,"y":227.56666564941406}]},\
      {"x":59.5,"y":227.56666564941406,"highlight":true,"active":true,"lines":[{"x":64.5,"y":226.56666564941406}]},\
      {"x":64.5,"y":226.56666564941406,"highlight":true,"active":true,"lines":[{"x":66,"y":221.56666564941406}]},\
      {"x":66,"y":221.56666564941406,"highlight":true,"active":true,"lines":[{"x":66,"y":216.56666564941406}]},\
      {"x":66,"y":216.56666564941406,"highlight":true,"active":true,"lines":[{"x":66.5,"y":211.06666564941406}]},\
      {"x":66.5,"y":211.06666564941406,"highlight":true,"active":true,"lines":[{"x":72,"y":209.06666564941406}]},\
      {"x":72,"y":209.06666564941406,"highlight":true,"active":true,"lines":[{"x":76,"y":212.56666564941406}]},\
      {"x":76,"y":212.56666564941406,"highlight":true,"active":true,"lines":[{"x":78,"y":217.56666564941406}]},\
      {"x":78,"y":217.56666564941406,"highlight":true,"active":true,"lines":[{"x":76,"y":223.06666564941406}]},\
      {"x":76,"y":223.06666564941406,"highlight":true,"active":true,"lines":[{"x":75,"y":228.06666564941406}]},\
      {"x":75,"y":228.06666564941406,"highlight":true,"active":true,"lines":[{"x":79.5,"y":232.56666564941406}]},\
      {"x":79.5,"y":232.56666564941406,"highlight":true,"active":true,"lines":[{"x":85,"y":235.06666564941406}]},\
      {"x":85,"y":235.06666564941406,"highlight":true,"active":true,"lines":[{"x":90.5,"y":236.06666564941406}]},\
      {"x":90.5,"y":236.06666564941406,"highlight":true,"active":true,"lines":[{"x":95.5,"y":236.06666564941406}]},\
      {"x":95.5,"y":236.06666564941406,"highlight":true,"active":true,"lines":[{"x":101,"y":236.06666564941406}]},\
      {"x":101,"y":236.06666564941406,"highlight":true,"active":true,"lines":[{"x":106.5,"y":233.56666564941406}]},\
      {"x":106.5,"y":233.56666564941406,"highlight":true,"active":true,"lines":[{"x":110.5,"y":230.06666564941406}]},\
      {"x":110.5,"y":230.06666564941406,"highlight":true,"active":true,"lines":[{"x":113,"y":224.56666564941406}]},\
      {"x":113,"y":224.56666564941406,"highlight":true,"active":true,"lines":[{"x":110,"y":220.56666564941406}]},\
      {"x":110,"y":220.56666564941406,"highlight":true,"active":true,"lines":[{"x":105,"y":218.56666564941406}]},\
      {"x":105,"y":218.56666564941406,"highlight":true,"active":true,"lines":[{"x":100,"y":219.06666564941406}]},\
      {"x":100,"y":219.06666564941406,"highlight":true,"active":true,"lines":[{"x":95,"y":218.06666564941406}]},\
      {"x":95,"y":218.06666564941406,"highlight":true,"active":true,"lines":[{"x":92.5,"y":213.06666564941406}]},\
      {"x":92.5,"y":213.06666564941406,"highlight":true,"active":true,"lines":[{"x":92,"y":208.06666564941406}]},\
      {"x":92,"y":208.06666564941406,"highlight":true,"active":true,"lines":[{"x":97,"y":205.56666564941406}]},\
      {"x":97,"y":205.56666564941406,"highlight":true,"active":true,"lines":[{"x":102.5,"y":205.06666564941406}]},\
      {"x":102.5,"y":205.06666564941406,"highlight":true,"active":true,"lines":[{"x":108.5,"y":205.56666564941406}]},\
      {"x":108.5,"y":205.56666564941406,"highlight":true,"active":true,"lines":[{"x":113.5,"y":205.56666564941406}]},\
      {"x":113.5,"y":205.56666564941406,"highlight":true,"active":true,"lines":[{"x":118.5,"y":205.56666564941406}]},\
      {"x":118.5,"y":205.56666564941406,"highlight":true,"active":true,"lines":[{"x":123.5,"y":205.56666564941406}]},\
      {"x":123.5,"y":205.56666564941406,"highlight":true,"active":true,"lines":[{"x":128.5,"y":203.56666564941406}]},\
      {"x":128.5,"y":203.56666564941406,"highlight":true,"active":true,"lines":[{"x":133,"y":200.56666564941406}]},\
      {"x":133,"y":200.56666564941406,"highlight":true,"active":true,"lines":[{"x":136,"y":195.56666564941406}]},\
      {"x":136,"y":195.56666564941406,"highlight":true,"active":true,"lines":[{"x":136.5,"y":190.06666564941406}]},\
      {"x":136.5,"y":190.06666564941406,"highlight":true,"active":true,"lines":[{"x":136,"y":185.06666564941406}]},\
      {"x":136,"y":185.06666564941406,"highlight":true,"active":true,"lines":[{"x":132,"y":181.06666564941406}]},\
      {"x":132,"y":181.06666564941406,"highlight":true,"active":true,"lines":[{"x":127,"y":180.06666564941406}]},\
      {"x":127,"y":180.06666564941406,"highlight":true,"active":true,"lines":[{"x":122,"y":181.56666564941406}]},\
      {"x":122,"y":181.56666564941406,"highlight":true,"active":true,"lines":[{"x":118,"y":184.56666564941406}]},\
      {"x":118,"y":184.56666564941406,"highlight":true,"active":true,"lines":[{"x":113.5,"y":187.56666564941406}]},\
      {"x":113.5,"y":187.56666564941406,"highlight":true,"active":true,"lines":[{"x":108.5,"y":189.06666564941406}]},\
      {"x":108.5,"y":189.06666564941406,"highlight":true,"active":true,"lines":[{"x":103.5,"y":190.56666564941406}]},\
      {"x":103.5,"y":190.56666564941406,"highlight":true,"active":true,"lines":[{"x":96.5,"y":191.06666564941406,"highlight":true,\
      "active":true,"lines":[{"x":91.5,"y":191.06666564941406}]}]}],"textBox":{"active":false,"hasMoved":false,"movesIndependently":false,\
      "drawnIndependently":true,"allowedOutsideImage":true,"hasBoundingBox":true},"canComplete":false,"highlight":false}';

      return JSON.parse(exampleRoiJSON);
    }

</script>
</html>
